<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="../css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="../js/jquery-1.11.3.min.js" ></script>
<script src="../js/bootstrap.min.js" ></script>
<style type="text/css">
body { margin:30px; padding:30px;}
</style>
</head>

<body>
<h3>使用&times;作为关闭按</h3>
<div class="alert alert-success" role="alert">
    <button class="close" data-dismiss="alert"   type="button" >&times;</button>
    <p>恭喜您操作成功！</p>
</div>
<h3>使用a标签作为关闭按钮</h3>
<div class="alert alert-warning" role="alert">
	<h4>谨防被骗</h4>
	<p>请确认您转账的信息是你的亲朋好友，不要轻意相信不认识的人...</p>
	<a href="#" data-dismiss="alert" class="btn btn-danger" >关闭</a>
</div>
<h3>使用button按钮作为关闭按钮</h3>
<div class="alert alert-warning" role="alert" id="myAlert">
	<h4>谨防被骗</h4>
	<p>请确认您转账的信息是你的亲朋好友，不要轻意相信不认识的人...</p>
</div>
<button type="button" data-target="#myAlert" data-dismiss="alert" class="btn btn-danger" >关闭</button>

<br/>
<br />
<div class="btn-group">
    <label class="btn btn-primary">
        <input type="radio" name="options" checked="checked" id="options1">男
    </label>
    <label class="btn btn-primary">
        <input type="radio" name="options" id="options2">女
    </label>
    <label class="btn btn-primary">
        <input type="radio" name="options" id="options3">未知
    </label>
</div>
<h4>复选按钮</h4>
<div class="btn-group">
    <label class="btn btn-primary">
        <input type="checkbox" name="options" id="options1">电影
    </label>
    <label class="btn btn-primary">
        <input type="checkbox" name="options" id="options2">音乐
    </label>
    <label class="btn btn-primary">
        <input type="checkbox" name="options" id="options3">游戏
    </label>
    <label class="btn btn-primary">
        <input type="checkbox" name="options" id="options4">摄影
    </label>
</div>
<h4>状态切换</h4>
<div class="btn-group" data-toggle="button">
    <button type="button" data-toggle="button" class="btn btn-primary">确认</button>
</div>
<br/>
<h4>javascript用法</h4>
<div class="btn-group" data-toggle="buttons">
    <button type="button" data-toggle="button" class="btn btn-primary" id="mybutton" data-complete-text="Loading finished" data-loading-text="Loading...">确认</button>
</div>
</body>
  <script>
 $(function() {
      $("#mybutton").click(function(){
         $(this).button('loading').delay(2000).queue(function() {
            $(this).button('complete');
         });        
      });
 });
  </script>
</html>
